Vuex 模块化

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

import user from './module/user'

import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
	state: {},
	mutations: {},
	modules:{
		user
	},
	getters
})

export default store

// store/getters.js
const getters = {
  token: state => state.user.token
}
export default getters

// store/module/user.js
const Token = 'token'

export default {
	namespaced: true, // 设置为带命名空间的模块
	state: {
		token: sessionStorage.getItem(Token)
	},
	getters: {},
	mutations: {
		setToken(state, token) {
			state.token = token
      sessionStorage.setItem(Token)
		}
	},
	actions: {
		login({
			commit,
			rootState
		}){
      // 因为设置为带命名空间的模块，所以引用需要带着命名空间名
      // 自行选择是否配置 Promise
			if(!rootState.user.token){ 
				commit('setToken', '模拟Token')
			}
		}
	}
};

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.prototype.$store = store

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

// Vue 页面内使用
this.$store.dispatch('user/login')

// router 内使用
import store from '@/store/index.js'
store.dispatch('user/login')